<template>
    <div>
        <!-- search start -->
         <searchBar
             placeHolder="请输入市代名称/负责人名称"
             @handleSearch="init"
         />
        <!-- search end -->

        <!-- table start -->
        <tableDataEl
            :page.sync="page"
            :pageSize.sync="pageSize"
            :tableData="tableData.list"
            :tableLabel="tableLabel"
            :pageCount="tableData.rows"
            v-loading="loading"
            @handleDetail="handleDetail"
            @through="through"
            @reject="reject"
        />
        <!-- table end -->

        <!-- dialog start -->
        <el-dialog
            :visible.sync="isShowDialog"
            center
            width="40%"
            title="物料详情"
        >
            <el-form v-loading="detailLoading">
                <el-form-item label="物料信息:">
                    <el-table :data="mate" border>
                        <el-table-column
                            label="物料名称"
                            prop="materiel"
                            align="center"
                        >

                        </el-table-column>
                        <el-table-column
                            label="数量"
                            prop="num"
                            align="center"
                        >

                        </el-table-column>
                        <el-table-column
                            label="备注"
                            prop="remarks"
                            align="center"
                        >

                        </el-table-column>
                    </el-table>
                </el-form-item>
                <el-form-item label="收货地址:">
                    {{address.province}}{{address.city}}{{address.county}}{{address.address}}
                </el-form-item>
            </el-form>
        </el-dialog>

        <!-- reject dialog -->
        <el-dialog
            :visible.sync="isShowReject"
            center
            title="驳回理由"
            width="28%"
            @close="rejectText.text = ''"
        >
            <el-form :model="rejectText" >
                <el-form-item
                        label="驳回理由"
                        prop="text"
                >
                    <el-input
                            v-model="rejectText.text"
                            style="width:45%;margin-right:7%;"
                            placeholder="请输入驳回理由"
                    ></el-input>
                    <el-button type="primary" @click="confirmReject">驳回</el-button>
                    <el-button type="danger" @click="isShowReject = false"> 取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
        <!-- dialog end -->
    </div>
</template>

<script>
    import tableDataEl from '@/views/Setup/common/table'
    export default {
        name: "material",
        components: {
            tableDataEl
        },
        data () {
            return {
                page: 1,
                pageSize: 8,
                tableData: {},
                tableLabel: [
                    {
                        label: '市代名称',
                        prop: 'company'
                    },
                    {
                        label: '负责人',
                        prop: 'leader'
                    },
                    {
                        label: '联系方式',
                        prop: 'phone'
                    },
                    {
                        label: '申请时间',
                        prop: 'create_time'
                    },
                    {
                        label: '详情',
                        detail: true,
                        btnText: '查看',
                        methodName: 'handleDetail'
                    },
                    {
                        label: '操作',
                        ownerThroughReject: true
                    }
                ],
                loading: false,
                isShowDialog: false,
                detailLoading: false,
                mate: [],
                address: {},
                isShowReject: false,
                rejectText: {
                    text: ''
                },
                obj: {}
            }
        },
        methods: {
            async init ( search = '' ) {  //初始化
                if(search) search['key'] = search['search'];
                this.loading = true;
                let paramsStr = Object.assign(search, {page: this.page, pageSize: this.pageSize});
                let res = await this.api.material_auditList(paramsStr);
                res.code ? this.tableData = res.data : this.$message(res.msg);
                this.loading = false
            },
            async handleDetail ( ...value ) { //详情
                this.isShowDialog = true;
                this.detailLoading = true;
                const temp = value[1];
                let res = await this.api.getMateDetail({id: temp['id'], gid: temp['gid']});
                if( res.code ) {this.mate = res.data.mate; this.address = res.data.address; }
                else this.$message(res.msg);
                this.detailLoading = false;
            },
            async through ( value ) {  //通过
                this.$confirm('确定通过吗！', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then( () => {
                    this.api.auditHandle({phone: value['phone'], id: value['id'], gid: value['gid'], company: value['company']}).then((res) => {
                        this.$message({
                            type: res.code ? 'success' : 'error',
                            message: res.msg
                        });
                        this.init();
                    })
                }).catch( () => {});
            },
            reject ( value ) {
                this.isShowReject = true;
                this.obj = value;
            },
            async confirmReject () { //驳回
                const arr = ['id','gid','company','phone','create_time'];
                let params = {};
                arr.filter((item) => {
                    params[item] = this.obj[item]
                });
                let res = await this.api.m_auditReject(Object.assign(params,{reason: this.rejectText.text}));
                this.$message({
                    type: res.code ? 'success' : 'error',
                    message: res.msg
                });
                this.isShowReject = false;
                this.init();
            }
        },
        mounted () {
            this.init();
        },
        watch: {
            page () {
                this.init();
            },
            pageSize () {
                this.init();
            }
        }
    }
</script>

<style scoped>

</style>
